
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../../src/css/common/reset.css">
    <link rel="stylesheet" href="datepicker.css">
    <script src="../src/lib/jquery.js"></script>
    <script src="moment.min.js"></script>
    <script src="datepicker.all.js"></script>
</head>
<body>
<div>
    <div class="c-datepicker-date-editor  J-datepicker-range-day">
        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
        <input placeholder="开始日期" name="start_date" class="c-datepicker-data-input only-date" value="">
        <span class="c-datepicker-range-separator">-</span>
        <input placeholder="结束日期" name="end_date" class="c-datepicker-data-input only-date" value="">
    </div>

    <table><tbody><tr class="firstRow"><th>参数名</th><th>默认值（可选值）</th><th>作用</th><th>类型</th></tr><tr><td>format</td><td>YYYY-MM-DD HH:mm:ss</td><td>datepicker 类型</td><td>String</td></tr><tr><td>isRange</td><td>false</td><td>是否范围选择</td><td>Boolean</td></tr><tr><td>min</td><td>false</td><td>时间最小值</td><td>false/String</td></tr><tr><td>max</td><td>false</td><td>时间最大值</td><td>false/String</td></tr><tr><td>hasShortcut</td><td>false</td><td>是否开启快捷选项</td><td>Boolean</td></tr><tr><td>shortcutOptions</td><td>[]</td><td>快捷选项配置参数</td><td>Array</td></tr><tr><td>between</td><td>false</td><td>开始和结束值之间的时间间隔天数（只对范围有效）</td><td>false/Number</td></tr></tbody></table>
</div>
</body>
<script>

    $(function(){
        $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: [{
                name: '最近一周',
                day: '-7,0'
            }, {
                name: '最近一个月',
                day: '-30,0'
            }]
        });
    })
</script>
</html>